<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>人气排名</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<include file="public/comm" />
		<script type="text/javascript" src="__STATIC__/js/cellar/mui.previewimage.js"></script>
		<style>
			.mui-preview-image.mui-fullscreen{ position: fixed; z-index: 20; background-color: #000;}
			.mui-preview-header, .mui-preview-footer{ position: absolute; width: 100%; left: 0; z-index: 10;}
			.mui-preview-header{ height: 44px; top: 0;}
			.mui-preview-footer{ height: 50px; bottom: 0px;}
			.mui-preview-header .mui-preview-indicator{ display: block; line-height: 25px; color: #fff; text-align: center; margin: 15px auto 4; width: 70px; background-color: rgba(0, 0, 0, 0.4); border-radius: 12px; font-size: 16px;}
			.mui-preview-image{ display: none; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
			.mui-preview-image.mui-preview-in{ -webkit-animation-name: fadeIn; animation-name: fadeIn;}
			.mui-preview-image.mui-preview-out{ background: none; -webkit-animation-name: fadeOut; animation-name: fadeOut;}
			.mui-preview-image.mui-preview-out .mui-preview-header, .mui-preview-image.mui-preview-out .mui-preview-footer{ display: none;}
			.mui-zoom-scroller{ position: absolute; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; margin: 0; -webkit-backface-visibility: hidden;}
			.mui-zoom{ -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}
			.mui-slider .mui-slider-group .mui-slider-item img{ width: auto; height: auto; max-width: 100%; max-height: 100%;}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img{ width: 100%;}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item{ display: inline-table;}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img{ display: table-cell; vertical-align: middle;}
			.mui-preview-loading{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: none;}
			.mui-preview-loading.mui-active{ display: block;}
			.mui-preview-loading .mui-spinner-white{ position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px; height: 50px; width: 50px;}
			.mui-preview-image img.mui-transitioning{ -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease; transition: transform 0.5s ease, opacity 0.5s ease;}
			@-webkit-keyframes fadeIn{ 0%{ opacity: 0;}
				100%{ opacity: 1;}
			}
			@keyframes fadeIn{ 0%{ opacity: 0;}
				100%{ opacity: 1;}
			}
			@-webkit-keyframes fadeOut{ 0%{ opacity: 1;}
				100%{ opacity: 0;}
			}
			@keyframes fadeOut{ 0%{ opacity: 1;}
				100%{ opacity: 0;}
			}
			p img{ max-width: 100%; height: auto;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav fs_xl">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title fs_xl">评论详情</h1>
		</header>
		<div class="mui-content fs_xl">
			<div class="tb_xt" id="discuss" discuss-id="{$discuss_info.discuss_id}">
				<ul>
					<li>
						<div class="xt_top">
							<span><img src="{$discuss_info.head_pic}" /></span>
							<span class="fs_m">{$discuss_info.nickname}</span>
							<span class="fs_s"><i class="fs_xs">{$discuss_info.addtime|date="Y-m-d",###}</i></span>
						</div>
						<div class="xt_m">
							<p class="fs_m">
								</clipPath><em class="fs_l">#{$discuss_info.title}#</em>{$discuss_info.content}</p>
							<p class="fs_m cls" id="img_fd">
								<volist name="$discuss_info.img"  id="vo">
									<span><img src="{$vo}" data-preview-src="" data-preview-group="1" /></span>
								</volist>
							</p>
						</div>
					</li>
				</ul>
			</div>
			<div class="tb_pl_item">
				<div class="tb_xt">
					<ul>
						<volist name="discuss_reply_info" id="vo"  key="k">
							<li>
								<div class="xt_top pl_em">
									<span><img src="{$vo.head_pic}" /></span>
									<span class="fs_m at_t">
										<em class="fs_s at_name">{$vo.nickname}</em>
										<em class="fs_xs"><i>{$k}楼</i>{$vo.addtime|date="Y-m-d",###}</em>
									</span>
									<span class="fs_s"><a class="mui-icon mui-icon-chat fs_xl" discuss_id="{$vo.id}"></a></span>
								</div>
								<div class="xt_m pl_pp">
									<p class="fs_m">{$vo.content}</p>
								</div>
								<div class="zc_hf">
									<volist name="vo.reply_list"  id="voo">
										<span class="fs_s">{$voo.nickname}:<em>{$voo.content}</em><i class="fs_xxs">{$voo.addtime|date="m-d H:i",###}</i></span>
									</volist>
								</div>
							</li>
						</volist>
					</ul>
				</div>
			</div>
			<div class="pl_txt">
				<input type="text" placeholder="写评论" class="fs_m" id="pl_input" />
				<a class="pl_btn fs_m"  id="discuss_reply" parent_id="0">发布</a>
			</div>
		</div>
		<script type="text/javascript">
			mui.init();
			mui.previewImage();
			$(function(){
				$(".pl_em a").click(function(){
					var at_t=$(this).parent().siblings(".at_t").find(".at_name").text();
					$("#pl_input").attr("placeholder","@"+at_t);
					var s =$(this).attr("discuss_id");
					$("#discuss_reply").attr("parent_id",s);
				})
				$("#discuss").click(function(){
					$("#pl_input").attr("placeholder","写评论...");
					$("#discuss_reply").attr("parent_id",'0');
				});
				$("#discuss_reply").click(function(){
					 var content = $("#pl_input").val();
					 var parentid = $(this).attr("parent_id");
					 var discuss_id = {$discuss_info.discuss_id};
					 $.ajax({
						type:"POST",
						url:"/Mobile/discuss/add_discuss_reply",
						data:{"content":content,"parentid":parentid,"discuss_id":discuss_id},
						dataType:"json",
						async:false,//同步操作
						success:function(data){
							if(data.status == 0){
								alert(data.msg);
							}
							history.go(0);
						}
					});
				});
			})
			
		</script>
	</body>
</html>